<script setup lang="ts">
import { timeFormatter } from '@/utils/timeHandlers'
import { useRoleStore } from '@/stores/useRoles'

const roleStore = useRoleStore()
onMounted(() => {
  roleStore.queryRoles()
})
</script>
<template>
  <el-card>
    <template #header>
      <h2>角色管理</h2>
    </template>
    <div>
      <el-table :data="roleStore.queryResult.records" border stripe>
        <el-table-column type="index" label="序号" align="center" width="80" />
        <el-table-column prop="name" label="角色名称" align="center" />
        <el-table-column prop="description" label="角色描述" align="center" />
        <el-table-column prop="createdTime" label="创建时间" :formatter="timeFormatter" align="center" />
        <el-table-column prop="updatedBy" label="更新人" align="center" width="100" />
        <el-table-column prop="updatedTime" label="更新时间" :formatter="timeFormatter" align="center" />
        <el-table-column label="操作" align="center" v-slot="{ row }">
          <el-button link @click="$router.push({ name: 'alloc-menus', params: { roleId: row.id } })">分配菜单</el-button>
          <el-button link @click="$router.push({ name: 'alloc-resources', params: { roleId: row.id } })">分配资源</el-button>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>
<style scoped lang="scss">
.container {
  color: #000;
}
</style>
